<script setup lang="tsx">
import { NButton, NPopconfirm, NSpace, NTag } from "naive-ui";
import TableModal from "./components/TableModal.vue";
import { useLoading } from "@/hooks";
import { arrayToTree, renderIcon } from "@/utils";
import { delMenu, listMenu } from "@/service/api/menu";

const { loading, startLoading, endLoading } = useLoading(false);

function deleteData(id: number) {
  delMenu(id).then(() => {
    getMenuList();
  });
}

const tableModalRef = ref();
const initialParams = {
  menuName: ""
};
const params = ref({ ...initialParams });

const columns: any = [
  {
    title: "名称",
    key: "menuName",
    width: 200,
  },
  {
    title: "图标",
    align: "center",
    key: "icon",
    width: "6em",
    render: (row: any) => {
      return row.icon && renderIcon(row.icon, { size: 20 })();
    },
  },
  {
    title: "排序",
    align: "center",
    key: "orderNum",
  },
  {
    title: "状态",
    align: "center",
    key: "status",
    render: (row: any) => {
      return (
        <NTag type={row.status === "0" ? "success" : "info"}>
          {row.status === "0" ? "启用" : "禁用"}
        </NTag>
      );
    },
  },
  {
    title: "路径",
    key: "path",
    ellipsis: {
      tooltip: true,
    },
  },
  {
    title: "组件路径",
    key: "component",
    ellipsis: {
      tooltip: true,
    },
    render: (row: any) => {
      return row.component || "-";
    },
  },
  {
    title: "菜单类型",
    align: "center",
    key: "menuType",
    width: "6em",
    render: (row: any) => {
      const menuType =
        row.menuType === "M" ? "目录" : row.menuType === "C" ? "菜单" : "按钮";
      const type =
        row.menuType === "M" ? "success" : row.menuType === "C" ? "warning" : "info";
      return (
        <NTag round type={type}>
          {menuType}
        </NTag>
      );
    },
  },
  {
    title: "操作",
    align: "center",
    key: "actions",
    render: (row: any) => {
      const ActionButtons = ({ rowData, openModal, deleteData }: any) => {
        const editButton = (
          <NButton size="small" type="warning" onClick={() => openModal("edit", rowData)}>
            编辑
          </NButton>
        );

        const deleteButton = (
          <NPopconfirm onPositiveClick={() => deleteData(rowData.menuId)}>
            {{
              default: () => "确认删除",
              trigger: () => (
                <NButton size="small" type="error">
                  删除
                </NButton>
              ),
            }}
          </NPopconfirm>
        );

        const newButton =
          rowData.menuType === "F" ? null : (
            <NButton
              size="small"
              type="success"
              onClick={() => openModal("addP", rowData)}
            >
              新建
            </NButton>
          );

        return (
          <NSpace justify="center">
            {newButton}
            {editButton}
            {deleteButton}
          </NSpace>
        );
      };
      return (
        <ActionButtons
          rowData={row}
          openModal={tableModalRef.value.openModal}
          deleteData={deleteData}
        />
      );
    },
  },
];

const tableData = ref<AppRoute.RowRoute[]>([]);
/** -------------------method----------------------- */
onMounted(() => {
  getMenuList();
});

// 菜单列表
async function getMenuList() {
  startLoading();
  await listMenu(params.value).then((res: any) => {
    res.data.forEach((item: any) => {
      item.pid = item.parentId ? item.parentId : null;
      item.id = item.menuId;
    });
    tableData.value = arrayToTree(res.data);
    endLoading();
  });
}
function handleRefresh() {
  getMenuList();
}

// 重置
function handleResetSearch() {
  params.value = { ...initialParams };
  getMenuList();
}
</script>

<template>
  <NSpace vertical size="large">
    <n-card>
      <n-form :model="params" label-placement="left" :show-feedback="false">
        <n-grid :x-gap="30" :cols="4">
          <n-form-item-gi label="菜单名称" path="menuName">
            <n-input v-model:value="params.menuName" placeholder="请输入" />
          </n-form-item-gi>
          <n-form-item-gi>
            <NButton type="primary" @click="getMenuList">
              <template #icon>
                <icon-park-outline-search />
              </template>
              搜索
            </NButton>
            <NButton strong secondary @click="handleResetSearch">
              <template #icon>
                <icon-park-outline-redo />
              </template>
              重置
            </NButton>
          </n-form-item-gi>
        </n-grid>
      </n-form>
    </n-card>
    <n-card>
      <NSpace vertical size="large">
        <div class="flex gap-4">
          <NButton type="primary" @click="tableModalRef.openModal('add')">
            <template #icon>
              <icon-park-outline-add-one />
            </template>
            新建
          </NButton>
        </div>
        <n-data-table
          :row-key="(row:AppRoute.RowRoute) => row.id"
          :columns="columns"
          :data="tableData"
          :loading="loading"
        />
        <TableModal
          ref="tableModalRef"
          :all-routes="tableData"
          modal-name="菜单"
          @refresh="handleRefresh"
        />
      </NSpace>
    </n-card>
  </NSpace>
</template>
